<template>
    <div class="weather_box">
        <div class="city">{{ city }}</div>
        <div class="qiwen">{{ data_now.temp }}°C</div>
        <div class="tianqi"><i :class=icon id="icon_font"></i><span>{{ data_now.text }}</span></div>
        <div class="xiangqing">
            <ul>
                <li>
                    <div>风向</div>
                    <div>{{ data_now.windDir }}</div>
                </li>
                <li>
                    <div>风力等级</div>
                    <div>{{ data_now.windScale }}级</div>
                </li>
                <li>
                    <div>风速</div>
                    <div>{{ data_now.windSpeed }}</div>
                </li>
                <li>
                    <div>近一小时降水量</div>
                    <div>{{ data_now.precip }}mm</div>
                </li>
                <li>
                    <div>大气压强</div>
                    <div>{{ data_now.pressure }}hPa</div>
                </li>
                <li>
                    <div>能见度</div>
                    <div>{{ data_now.vis }}km</div>
                </li>
            </ul>
        </div>`
    </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from "vue"
let data_now = ref("")
let city = ref("")
let icon = ref("")

onMounted(async ()=>{
   await init()
})
//获取天气信息
const init = async ()=>{
    // let ip = await axios.get(`https://api.ipify.org`)
    // let adcode = await axios.get(`https://restapi.amap.com/v3/ip?key=8223329c143d910865f5ead4f889f62a&ip=${ip.data}&type=4`)
    // let locationId = await axios.get(`https://geoapi.qweather.com/v2/city/lookup?location=${adcode.data.adcode}&key=2937c1738af34a358476cc6c8bce5b92`)
    // let data = await axios.get(`https://devapi.qweather.com/v7/weather/now?location=${locationId.data.location[0].id}&key=e07dd591fa9f4e15b25b1c35aaead41e`)
    // data_now.value = data.data.now
    // icon.value = "qi-" + data.data.now.icon
}


</script>

<style lang='less' scoped>
.weather_box {
    text-align: center;
    margin-top: .4rem;
    width: 4rem;
    border: @xborder solid @qls;
    background-color: @tmb;
    font-size: .16rem;
    border-radius: @dyj;
    box-sizing: border-box;

    .city {
        width: 100%;
        font-size: .24rem;
        font-weight: 900;
        margin-top: .2rem;
        color: @ls;
    }

    .qiwen {
        width: 100%;
        font-size: .20rem;
        font-weight: 500;
        color: @ls;
        margin-top: .1rem;
    }

    .tianqi {
        height: .4rem;
        line-height: .4rem;

        #icon_font {
            font-size: .3rem;
            color: @ls;
        }

        span {
            display: inline-block;
            height: .4rem;
            font-size: .16rem;
            color: @ls;
            margin-left: .1rem;
        }
    }

    .xiangqing {
        width: 100%;

        ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;

            li {
                width: 50%;

                div {
                    height: .2rem;
                    padding: .1rem 0;
                    line-height: .2rem;
                }

                div:nth-child(1) {
                    font-size: .2rem;
                    color: @hui_font;
                }

                div:nth-child(2) {
                    font-size: .16rem;
                    color: @ls;
                }
            }


        }
    }
}
</style>